import 'package:carousel_slider/carousel_options.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:date_format/date_format.dart';
import 'package:flutter/material.dart';
import 'package:flutter_base/config/app_color.dart';
import 'package:flutter_base/config/app_config.dart';
import 'package:flutter_base/generated/assets.dart';
import 'package:flutter_base/pages/test_detail/widgets/test_card_base.dart';
import 'package:flutter_base/widgets/image/auto_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class TestQuoteImageBlock extends StatefulWidget {
  // final String? title;
  // final String? quote;
  final List? data;

  // final String? imageUrl;

  const TestQuoteImageBlock(
      {super.key,
      // this.title = 'Spiritual Inspiration',
      this.data // this.imageUrl,
      });

  @override
  State<TestQuoteImageBlock> createState() => _TestQuoteImageBlockState();
}

class _TestQuoteImageBlockState extends State<TestQuoteImageBlock> {
  int _currentIndex = 0;
  List datas = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    if ((widget.data ?? []).isEmpty) {
      datas = [
        {
          "author": "Jonatan Mårtensson",
          "image": "",
          "quote":
              "A true leader does not tell others what to do, but inspires them to want to do it. You possess this gift, being skilled at motivating and guiding others."
        }
      ];
    } else {
      datas = widget.data ?? [];
    }
  }

  @override
  Widget build(BuildContext context) {
    return TestCardBase(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // SizedBox(height: 8.w),
          // 标题
          Text(
            'Spiritual Inspiration',
            style: TextStyle(
              fontSize: 16.sp,
              fontWeight: FontWeight.w600,
              color: AppColor.color0C0A09,
              height: 1.25,
            ),
            textAlign: TextAlign.center,
          ),
          Stack(
            clipBehavior: Clip.none,
            children: [
              Container(
                margin: EdgeInsets.only(top: 12.w),
                width: double.infinity,
                padding: EdgeInsets.only(
                  left: 8.w,
                  right: 8.w,
                  top: 24.w,
                  bottom: 12.w,
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12.w),
                  gradient: const LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Color(0xFFE1FCFF),
                      Color(0x00E1FCFF),
                    ],
                  ),
                ),
                child: Column(
                  children: [
                    // 头像和引用文字
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        // 头像

                        SizedBox(width: 8.w),
                        // 引用文字
                        Expanded(
                          child: Padding(
                              padding: EdgeInsets.only(top: 4.w),
                              child: CarouselSlider.builder(
                                itemCount: datas.length,
                                itemBuilder: (BuildContext context,
                                    int itemIndex, int pageViewIndex) {
                                  return Text(
                                    datas[itemIndex]['quote'] ?? '',
                                    style: TextStyle(
                                      fontSize: 14.sp,
                                      color: const Color(0xFF7F909F),
                                      height: 1.25,
                                    ),
                                  );
                                },
                                options: CarouselOptions(
                                    onPageChanged: (index, c) {
                                      if (mounted) {
                                        setState(() {
                                          _currentIndex = index;
                                        });
                                      }
                                    },
                                    autoPlay: true,
                                    height: 108.w,
                                    autoPlayInterval:
                                        const Duration(seconds: 3),
                                    viewportFraction: 1,
                                    enlargeFactor: 1),
                              )),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              Positioned(
                top: -8.w,
                child: AutoImage(
                  Assets.iconTestStar,
                  width: 48.w,
                  height: 48.w,
                ),
              )
            ],
          ),

          // SizedBox(height: 12.w),
          // 内容区域（带渐变背景）

          SizedBox(height: 4.w),
          // 底部指示器
          Row(mainAxisAlignment: MainAxisAlignment.center, children:
                  //   datas.map((e) {
                  // return    Container(
                  //       margin: EdgeInsets.symmetric(horizontal: 3.w),
                  //       width: 8.w,
                  //       height: 8.w,
                  //       decoration: BoxDecoration(
                  //         color: const Color(0xFF19DBF2).withOpacity(0.16),
                  //         borderRadius: BorderRadius.circular(12.w),
                  //       ),
                  //     );
                  //   }).toList()
                  [
            for (int i = 0; i < datas.length; i++)
              if (_currentIndex == i)
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 3.w),
                  width: 16.w,
                  height: 8.w,
                  decoration: BoxDecoration(
                    color: const Color(0xFF19DBF2),
                    borderRadius: BorderRadius.circular(12.w),
                  ),
                )
              else
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 3.w),
                  width: 8.w,
                  height: 8.w,
                  decoration: BoxDecoration(
                    color: const Color(0xFF19DBF2).withOpacity(0.16),
                    borderRadius: BorderRadius.circular(12.w),
                  ),
                )
          ]
              // [
              //   Container(
              //     width: 16.w,
              //     height: 8.w,
              //     decoration: BoxDecoration(
              //       color: const Color(0xFF19DBF2),
              //       borderRadius: BorderRadius.circular(12.w),
              //     ),
              //   ),
              //   SizedBox(width: 6.w),
              //   Container(
              //     width: 8.w,
              //     height: 8.w,
              //     decoration: BoxDecoration(
              //       color: const Color(0xFF19DBF2).withOpacity(0.16),
              //       borderRadius: BorderRadius.circular(12.w),
              //     ),
              //   ),
              //   SizedBox(width: 6.w),
              //   Container(
              //     width: 8.w,
              //     height: 8.w,
              //     decoration: BoxDecoration(
              //       color: const Color(0xFF19DBF2).withOpacity(0.16),
              //       borderRadius: BorderRadius.circular(12.w),
              //     ),
              //   ),
              // ],
              ),
        ],
      ),
    );
  }
}
